<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="card-header">
                <span>用户管理</span>
            </div>
        </template>
        <div class="input-btns">
            <el-input placeholder="请输入查询关键字" v-model="query">
                <template #append>
                    <el-button icon="Search" @click="resetInitUserList()"></el-button>
                </template>
            </el-input>
            <el-button type="primary">添加新用户</el-button>
        </div>
        <el-table :data="users" size="default" :border="true" stripe v-loading="isShowLoading">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="邮箱" prop="email"></el-table-column>
            <el-table-column label="电话" prop="mobile"></el-table-column>
            <el-table-column label="角色" prop="role_name"></el-table-column>
            <el-table-column label="状态" v-slot="{ row }">
                <el-tooltip effect="dark" content="【启用/禁用】用户" placement="bottom">
                    <el-switch :model-value="row.mg_state" size="small"> </el-switch>
                </el-tooltip>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <el-tooltip effect='dark' content='用户信息修改' placement='bottom'>
                    <el-button type='primary' size='small' @click="isShowEdit = true">
                        <el-icon>
                            <EditPen></EditPen>
                        </el-icon>
                    </el-button>
                </el-tooltip>
                <el-popconfirm title='确定删除用户吗?'>
                    <template #reference>
                        <div class="tip">
                            <el-tooltip effect='dark' content='删除当前用户' placement='bottom'>
                                <el-button type='danger' size='small'>
                                    <el-icon>
                                        <Delete></Delete>
                                    </el-icon>
                                </el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-popconfirm>
                <el-tooltip effect='dark' content='用户角色分配' placement='bottom'>
                    <el-button type='warning' size='small' @click="isShowRole = true">
                        <el-icon>
                            <Setting></Setting>
                        </el-icon>
                    </el-button>
                </el-tooltip>
            </el-table-column>
        </el-table>
        <el-pagination small="small" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
            v-model:page-size="pageSize" v-model:current-page="pageNum" :page-sizes="[5, 10, 15, 20]"
            @size-change="resetInitUserList()" @current-change="initUserList()" />
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { printLog } from "@/util";
import usersApi from "@/api/users.js";

let users = ref([])
let total = ref(0)
let pageSize = ref(5)
let pageNum = ref(1)
let query = ref("")
let isShowLoading = ref(false)

const resetInitUserList = function () {
    pageNum.value = 1;
    initUserList();
}
const initUserList = async function () {
    try {
        isShowLoading.value = true;
        let result = await usersApi.findUserList({
            query: query.value,
            pagenum: pageNum.value,
            pagesize: pageSize.value
        })
        // console.log(users.value.a.a)
        users.value = result.users;
        total.value = Number(result.total);
    } catch (error) {
        // if(process.env.NODE_ENV=="development"){
        //     console.error(error);
        // }
        printLog(error)
    } finally {
        isShowLoading.value = false;
    }
}
initUserList()
</script>

<style lang="scss" scoped>
.input-btns {
    margin-bottom: 20px;

    .el-input {
        display: inline-flex;
        width: 400px;
        margin-right: 20px;
    }
}

.el-card {
    display: flex;
    flex-flow: column;
    :deep(.el-card__body) {
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        height: 100%;
        overflow: hidden;
    }
}

.el-pagination {
    justify-content: center;
    margin-top: 20px;
}

.tip {
    display: inline-block;
    margin: 0px 12px;
}
</style>